<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>itsNeko滴答滴答</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <div class="miaoshus">
                        <div class="title center-align">“ Ticktack 滴滴答答~ ”</div>
                        “ 人生几何，九百月矣，深深的话，浅浅的说 ”                      
                    </div>
                    <hr>
                    <!-- 计算时间模块 -->
                    <div class="wrap">
                        <p>“ 人生只有 900 余月</p>
                        <p>过去的，是回忆</p>
                        <p>淡淡的约定，浅浅的留影 ”</p>
                        <div><canvas class="myLife" width="300px" height="300px"></canvas></div>
                        <p>“ 截至此刻，仅剩 '<span class="im0now"></span><span style="color: #e96900;font-size: 20px;">%</span>' 掌握在自己的手中</p>          
                        <p>幸运和安逸还是留给后面的人生吧，我想趁着有梦，豁出一切。 ”</p>
                        <script>
                            var birthday=new Date(1996,10,4);
                            var live=(new Date-birthday)/2592000000;
                            var range=[0,live-1];
                            for(var i=0;30>i;i++){
                                for(var j=0;30>j;j++){
                                    var current=30*i+j,
                                    canvas=document.getElementsByClassName("myLife")[0],
                                    ctx=canvas.getContext("2d");
                                    current>=range[0]&&current<=range[1]?ctx.fillStyle="#ccc":ctx.fillStyle="#e96900",
                                    ctx.fillRect(10*j+1,10*i+1,8,8),ctx.strokeStyle="#000",
                                    ctx.lineWidth=1,
                                    ctx.strokeRect(10*j,10*i,10,10)}}
                                    setInterval(function(){if($("span").hasClass("im0now"))
                                    {
                                    document.getElementsByClassName("im0now")[0].innerHTML=(100-(new Date-birthday)/2592000000/9).toFixed(9)}}
                                    ,300);   
                        </script>
                    </div>
                </div>
            </div>
        </div>
</body>
</html>